﻿<!DOCTYPE html>
<!--组织架构维护-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <style>
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
    </style>
</head>

<body>
    
    <div id="app" v-cloak>
        <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini">
    </el-input> -->
            <el-button type="primary" @click="appendNew(data)">{{col.btnAdd}}</el-button>
            <el-tree style="height:100%;min-height:600px" default-expand-all :expand-on-click-node="false"
                     class="filter-tree" :data="data" :props="defaultProps" :filter-node-method="filterNode"
                     ref="tree">
                <span class="custom-tree-node" slot-scope="scope">
                    <span>{{ scope.node.label }}</span>
                    <span>
                        <el-button type="text" size="mini" @click="amend(scope.node,scope.data)">
                            {{col.btnUpdate}}
                        </el-button>
                        <el-button type="text" size="mini" @click="append(scope.data)">
                            {{col.btnAdd}}
                        </el-button>
                        <el-button type="text" size="mini" @click="remove(scope.node, scope.data)">
                            {{col.btnDelete}}
                        </el-button>
                    </span>
                </span>
            </el-tree>
    </div>
    <script type="text/javascript">
        var id = 1000;
        var app = new Vue({
            el: '#app',
            data: {
                // filterText: '',
                // OrganizationalStructureMaintenance
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            },
            formInline: {
                //  model: { years: '' },
                model: {},
                offset: 0,
                limit: 10,
            },
            offset: 0,
            limit: 10,
            Form: {
            },
            // watch: {
            //     filterText: function (val) {
            //         this.$refs.tree.filter(val);
            //     }
            // },
            mounted: function () {
                //初始化数据
                this.getZBList();
                //列表高度自适应
                tablehigh(this);
            },
            methods: {
                //获取分页数据
                getZBList: function () {
                    var mythis = this;
                    myAjax("post", mythis, '/api/ZB_SafetyFrameWork/GetList', { model: {}, offset: 0, limit: 100 }, function (response) {
                        console.log(response);
                        //response.data.forEach(function (v) {
                        //    v.label = v.name;
                        //})
                        mythis.data = menuHelper(response.data, guidEmpty);
                        console.log('AA',mythis.data)
                     //   mythis.Form.OrganizationalStructureMaintenance = response.data;
                    });
                },


                ////获取分页数据
                //getZBList: function () {
                //    var currObj = this;
                //    myAjax("post", this, '/api/ZB_SafetyFrameWork/GetList', this.formInline, function (response) {
                //        console.log(response);
                //        //  currObj.ListItem.tablebox1 = response.data.pageData[0].tablebox1
                //        currObj.ListItem1.tablebox1 = response.data;
                //    });
                //},


                ////获取分页数据
                //GetPageData: function (currentIndex) { GetPageData(this, currentIndex, '/api/ZB_SafetyFrameWork/GetList') },
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                // 修改
                amend: function (node, data) {
                    console.log(data.label);
                    this.$prompt('请输入', '提示', {
                        inputValue: data.label,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /\S/,
                        inputErrorMessage: '不能为空'
                    }).then(function (value) {
                        data.label = value.value
                        data.name = data.label;
                     //   onSubmitForm(this, '/api/ZB_SafetyFrameWork/Save', data);
                        myAjax("post", this, '/api/ZB_SafetyFrameWork/Save', data,
                            function (response) {
                                console.log(response);
                                if (response.result == "Success") {
                                    showMessage(response.message, 'success');
                                }
                                else {
                                    showMessage(response.message, 'fail');
                                }

                            });
                        })
                 
                },
                // 增加
                append: function (data) {
                    var mythis = this;
                    this.$prompt('请输入', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /\S/,
                        inputErrorMessage: '不能为空'
                    }).then(function (value) {
                        //var newChild = { id: id++, name: value.value, children: [], pid: data.id };
                        var newChild = { id: id++, label: value.value, children: [], pid: data.id };
                        if (data.children == null) {
                            mythis.$set(data, 'children', []);
                        }
                        newChild.id = newGuid;
                        newChild.name = newChild.label;
                        data.children.push(newChild);
                        //if (data.children == null) {
                        //    this.set(data, 'children', []);
                        //}
                        //newChild.id = guidEmpty;
                        //data.children.push(newChild);
                      //  onSubmitForm(this, '/api/ZB_SafetyFrameWork/Save', newChild);
                        myAjax("post", this, '/api/ZB_SafetyFrameWork/Save', newChild,
                            function (response) {
                                console.log(response);
                                if (response.result == "Success") {
                                    showMessage(response.message, 'success');
                                }
                                else {
                                    showMessage(response.message, 'fail');
                                }

                            });
                        
                    });
                },
                // 增加
                appendNew: function (data) {
                  
                    this.$prompt('请输入', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /\S/,
                        inputErrorMessage: '不能为空'
                    }).then(function (value) {
                        var newChild = { id: guidEmpty, label: value.value, children: [], pid: null };
                        //if (data.children == null) {
                        //    mythis.$set(data, 'children', []);
                        //}
                        newChild.id = guidEmpty;
                        newChild.name = newChild.label;
                        data.push(newChild);
                      //  onSubmitForm(this, '/api/ZB_SafetyFrameWork/Save', newChild)
                        myAjax("post", this, '/api/ZB_SafetyFrameWork/Save', newChild,
                            function (response) {
                                console.log(response);
                                if (response.result == "Success") {
                                
                                    showMessage(response.message, 'success');
                                }
                                else {
                                    showMessage(response.message, 'fail');
                                }

                            });

                    });
                },
                // 删除
                remove: function (node, data) {
                    var parent = node.parent;
                    var children = parent.data.children || parent.data;
                    var index = children.findIndex(function d() { d.id === data.id });
                    this.$confirm('此操作将删除该项, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        myAjax("post", this, '/api/ZB_SafetyFrameWork/DeleteMuti', data.id,
                            function (response) {
                                console.log(response);
                                if (response.result == "Success") {
                                    showMessage(response.message, 'success');
                                }
                                else {
                                    showMessage(response.message, 'fail');
                                }

                            });
                     //   onSubmitForm(this, '/api/ZB_SafetyFrameWork/DeleteMuti', newChild)
                      //  onDelete(this, '/api/ZB_SafetyFrameWork/DeleteMuti');
                        children.splice(index, 1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(function () {
                        //this.$message({
                        //    type: 'info',
                        //    message: '已取消删除'
                        //});
                    });

                },
                // 筛选
                filterNode: function (value, data) {
                    if (!value) return true;
                    return data.label.indexOf(value) !== -1;
                }
            },
        });
        function menuHelper(list, pid) {
            var result = [];
            if (list.length <= 0)
                return list;
            list.forEach(function (v, i) {
                var temp = {};
                for (var key in v) {
                    temp[key] = v[key];
                }
                temp.label = v.name;
                temp.parentId = temp.pid ? temp.pid : guidEmpty;
                var obj;
                if (temp.parentId == pid) {
                    obj = temp;
                    var nextObj = menuHelper(list, temp.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
    </script>

</body>

</html>